<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的积分 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .header-bg {
      background: linear-gradient(135deg, #ff7e2d, #ff9d5c);
      height: 180px;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .menu-item {
      border-bottom: 1px solid var(--border);
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部背景 -->
    <div class="header-bg relative">
      <!-- 导航栏 -->
      <div class="px-4 py-3 flex items-center">
        <a href="user_center.html" class="mr-2 text-white">
          <i class="fas fa-arrow-left text-lg"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center text-white">我的积分</h1>
        <div class="w-5"></div>
      </div>
      
      <!-- 积分展示 -->
      <div class="px-4 pt-6 text-white">
        <div class="text-center">
          <div class="text-sm opacity-80">当前积分</div>
          <div class="text-4xl font-bold mt-1">210</div>
          <div class="text-xs opacity-80 mt-2">本月获得: +35积分</div>
        </div>
      </div>
    </div>
    
    <!-- 积分功能卡片 -->
    <div class="px-4 -mt-8 relative z-10">
      <div class="bg-white rounded-lg shadow-md grid grid-cols-4 p-4">
        <a href="member_points_detail.html" class="text-center">
          <div class="w-12 h-12 mx-auto rounded-full bg-blue-50 flex items-center justify-center">
            <i class="fas fa-list-ul text-blue-500"></i>
          </div>
          <div class="text-xs mt-2">积分明细</div>
        </a>
        
        <a href="member_points_mall.html" class="text-center">
          <div class="w-12 h-12 mx-auto rounded-full bg-red-50 flex items-center justify-center">
            <i class="fas fa-gift text-red-500"></i>
          </div>
          <div class="text-xs mt-2">积分商城</div>
        </a>
        
        <a href="member_points_tasks.html" class="text-center">
          <div class="w-12 h-12 mx-auto rounded-full bg-green-50 flex items-center justify-center">
            <i class="fas fa-tasks text-green-500"></i>
          </div>
          <div class="text-xs mt-2">赚积分</div>
        </a>
        
        <a href="member_points_rules.html" class="text-center">
          <div class="w-12 h-12 mx-auto rounded-full bg-purple-50 flex items-center justify-center">
            <i class="fas fa-info-circle text-purple-500"></i>
          </div>
          <div class="text-xs mt-2">积分规则</div>
        </a>
      </div>
    </div>
    
    <!-- 每日签到 -->
    <div class="px-4 mt-4">
      <div class="bg-white rounded-lg p-4">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-medium">每日签到</h3>
          <span class="text-xs text-gray-500">连续签到7天可获得额外奖励</span>
        </div>
        
        <div class="flex justify-between mb-3">
          <div class="text-center">
            <div class="w-10 h-10 rounded-full bg-primary-light primary-color flex items-center justify-center mx-auto">
              <i class="fas fa-check"></i>
            </div>
            <div class="text-xs mt-1">周一</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full bg-primary-light primary-color flex items-center justify-center mx-auto">
              <i class="fas fa-check"></i>
            </div>
            <div class="text-xs mt-1">周二</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full bg-primary-light primary-color flex items-center justify-center mx-auto">
              <i class="fas fa-check"></i>
            </div>
            <div class="text-xs mt-1">周三</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full primary-bg text-white flex items-center justify-center mx-auto relative">
              <i class="fas fa-calendar-day"></i>
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">
                今
              </div>
            </div>
            <div class="text-xs mt-1">周四</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full border border-gray-200 text-gray-300 flex items-center justify-center mx-auto">
              <i class="fas fa-calendar-day"></i>
            </div>
            <div class="text-xs mt-1">周五</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full border border-gray-200 text-gray-300 flex items-center justify-center mx-auto">
              <i class="fas fa-calendar-day"></i>
            </div>
            <div class="text-xs mt-1">周六</div>
          </div>
          
          <div class="text-center">
            <div class="w-10 h-10 rounded-full border border-gray-200 text-gray-300 flex items-center justify-center mx-auto">
              <div class="text-xs primary-color font-bold">+10</div>
            </div>
            <div class="text-xs mt-1">周日</div>
          </div>
        </div>
        
        <button class="w-full py-2 btn-primary rounded-lg mt-2">
          立即签到 +3积分
        </button>
      </div>
    </div>
    
    <!-- 积分任务 -->
    <div class="px-4 mt-4">
      <div class="bg-white rounded-lg">
        <div class="p-4 border-b border-gray-100">
          <div class="flex justify-between items-center">
            <h3 class="font-medium">积分任务</h3>
            <a href="member_points_tasks.html" class="text-xs text-gray-500 flex items-center">
              查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
            </a>
          </div>
        </div>
        
        <div class="menu-item p-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-3">
                <i class="fas fa-user-plus text-blue-500"></i>
              </div>
              <div>
                <h4 class="font-medium">邀请好友</h4>
                <p class="text-xs text-gray-500 mt-1">邀请好友注册可获得积分奖励</p>
              </div>
            </div>
            <button class="px-3 py-1 text-xs btn-outline rounded-full">
              去邀请
            </button>
          </div>
        </div>
        
        <div class="menu-item p-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-3">
                <i class="fas fa-comment-dots text-green-500"></i>
              </div>
              <div>
                <h4 class="font-medium">评价订单</h4>
                <p class="text-xs text-gray-500 mt-1">完成订单评价可获得积分奖励</p>
              </div>
            </div>
            <button class="px-3 py-1 text-xs btn-outline rounded-full">
              去评价
            </button>
          </div>
        </div>
        
        <div class="menu-item p-4">
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-yellow-50 flex items-center justify-center mr-3">
                <i class="fas fa-edit text-yellow-500"></i>
              </div>
              <div>
                <h4 class="font-medium">完善资料</h4>
                <p class="text-xs text-gray-500 mt-1">完善个人资料可获得积分奖励</p>
              </div>
            </div>
            <button class="px-3 py-1 text-xs btn-outline rounded-full">
              去完善
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 积分热门兑换 -->
    <div class="px-4 mt-4 mb-6">
      <div class="bg-white rounded-lg">
        <div class="p-4 border-b border-gray-100">
          <div class="flex justify-between items-center">
            <h3 class="font-medium">热门兑换</h3>
            <a href="member_points_mall.html" class="text-xs text-gray-500 flex items-center">
              查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
            </a>
          </div>
        </div>
        
        <div class="p-4">
          <div class="grid grid-cols-3 gap-3">
            <div class="text-center">
              <div class="bg-gray-100 rounded-lg p-3 mb-2">
                <div class="text-center primary-color font-bold">¥10</div>
                <div class="text-xs text-gray-500">优惠券</div>
              </div>
              <div class="text-xs primary-color">100积分</div>
            </div>
            
            <div class="text-center">
              <div class="bg-gray-100 rounded-lg p-3 mb-2">
                <i class="fas fa-mug-hot text-gray-400 text-xl"></i>
                <div class="text-xs text-gray-500 mt-1">保温杯</div>
              </div>
              <div class="text-xs primary-color">500积分</div>
            </div>
            
            <div class="text-center">
              <div class="bg-gray-100 rounded-lg p-3 mb-2">
                <i class="fas fa-broom text-gray-400 text-xl"></i>
                <div class="text-xs text-gray-500 mt-1">保洁券</div>
              </div>
              <div class="text-xs primary-color">1000积分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 签到按钮点击
      const signInBtn = document.querySelector('.btn-primary.rounded-lg.mt-2');
      
      signInBtn.addEventListener('click', function() {
        // 已签到状态
        if (this.textContent.includes('已签到')) {
          return;
        }
        
        // 更改按钮状态
        this.textContent = '已签到 +3积分';
        this.classList.remove('btn-primary');
        this.classList.add('bg-gray-200', 'text-gray-500');
        
        // 更新积分显示
        const pointsEl = document.querySelector('.text-4xl.font-bold');
        const currentPoints = parseInt(pointsEl.textContent);
        pointsEl.textContent = currentPoints + 3;
        
        // 更新今日签到状态
        const todayEl = document.querySelector('.primary-bg.text-white');
        todayEl.classList.remove('primary-bg');
        todayEl.classList.add('bg-primary-light');
        todayEl.innerHTML = '<i class="fas fa-check"></i>';
        
        // 显示签到成功提示
        alert('签到成功，获得3积分！');
      });
    });
  </script>
</body>
</html> 